<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>index</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../../js/vue.js"></script>
</head>

<body>
  <!-- 准备好一个容器-->
  <div id="demo">
    <h2>人员信息</h2>
    <h3>姓名:{{personName}}</h3>
    <h3>年龄:{{personAge}}</h3>
    <input type="submit" @click="showClick1">
    <hr>
    <h2>学院信息</h2>
    <h3>学校:{{schoolName}}</h3>
    <h3>位置:{{schoolAddres}}</h3>
    <input type="submit" @click="showClick2">
  </div>
</body>

<script type="text/javascript">
  let vm = new Vue({
    el: '#demo',
    data: {
      personAge: 18,
      personName: '成成',
      schoolAddres: '北京昌平',
      schoolName: '中央戏剧学院'
    },
    methods: {
      showClick1() {
        alert(`我叫${this.personName},今年${this.personAge}`)
      },
      showClick2() {
        alert(`${this.schoolName}坐落于${this.schoolAddres}`)
      }
    }
  })

</script>

</html>